<template>
    <view>
        <u-datetime-picker
            @close="pickerShowChange(false)"
            :closeOnClickOverlay="true"
            :minDate="minTime"
            :maxDate="maxTime"
            :show="modeShow ? false : showStart"
            v-model="start"
            :mode="mode"
            title="请选择开始时间"
            confirm-text="下一步"
            @cancel="pickerShowChange(false)"
            @confirm="pickStart"
        ></u-datetime-picker>
        <u-datetime-picker
            @close="pickerShowChange(true)"
            :closeOnClickOverlay="true"
            :minDate="minTime"
            :maxDate="maxTime"
            :show="showEnd"
            v-model="end"
            :mode="mode"
            title="请选择结束时间"
            cancel-text="上一步"
            @cancel="pickerShowChange(true)"
            @confirm="pickEnd"
        ></u-datetime-picker>
    </view>
</template>

<script>
export default {
    name: 'uni-byt-date-rang',
    // change:确认时间选择
    emits: ['change'],
    props: {
        // 显示
        show: {
            type: Boolean,
            default: false
        },
        // 时间格式 date为日期选择，time为时间选择，year-month为年月选择
        mode: {
            type: String,
            default: 'date'
        },
        // 开始时间
        startTime: {
            type: String,
            default: ''
        },
        // 结束时间
        endTime: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            minTime: new Date(new Date().getFullYear() - 2 + '-01-01 00:00:00').getTime(),
            maxTime: new Date().getTime(),
            start: new Date().getTime(),
            end: new Date().getTime(),
            showEnd: false,
            // 是否是不存在的时间格式
            modeShow: false
        };
    },
    computed: {
        showStart: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit('update:show', val);
            }
        }
    },
    created() {
        const startTime = this.startTime;
        if (startTime) {
            this.start = new Date(startTime).getTime();
        } else {
            this.start = new Date().getTime();
        }

        const endTime = this.endTime;
        if (endTime) {
            this.end = new Date(endTime).getTime();
        } else {
            this.end = new Date().getTime();
        }

        switch (this.mode) {
            case 'date':
                console.log('年-月-日');
                break;
            case 'time':
                console.log('时:分');
                this.start = '00:00';
                this.end = new Date().getHours() + ':' + new Date().getMinutes();
                break;
            case 'year-month':
                console.log('年-月');
                break;
            default:
                uni.$u.toast('暂无此时间格式');
                this.modeShow = true;
                break;
        }
    },
    methods: {
        filterDate(time) {
            const date = new Date(time);
            const Y = date.getFullYear();
            const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return `${Y}-${M}-${D}`;
        },
        filterYear(time) {
            const date = new Date(time);
            const Y = date.getFullYear();
            const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            return `${Y}-${M}`;
        },
        pickerShowChange(val) {
            this.showStart = val;
            this.showEnd = false;
        },
        pickStart(e) {
            this.showEnd = true;
            this.showStart = false;
            this.start = e.value;
        },
        pickEnd(e) {
            switch (this.mode) {
                case 'date':
                    console.log('年-月-日');
                    this.end = this.filterDate(e.value);
                    this.start = this.filterDate(this.start);
                    break;
                case 'time':
                    console.log('时:分');
                    this.end = e.value;
                    break;
                case 'year-month':
                    console.log('年-月');
                    this.end = this.filterYear(e.value);
                    this.start = this.filterYear(this.start);
                    break;
                default:
                    uni.$u.toast('暂无此时间格式');
                    this.modeShow = true;
                    break;
            }
            if (new Date(this.end + ' 00:00:00').getTime() < new Date(this.start + ' 00:00:00').getTime()) {
                uni.$u.toast('结束时间应大于开始时间');
                return false;
            }
            this.showEnd = false;
            this.$emit('change', [this.start, this.end]);
        }
    }
};
</script>

<style></style>
